<!-- 视频播放链接管理 -->

<template>
    <!-- 面包屑导航 -->
    <a-breadcrumb>
        <a-breadcrumb-item>admin</a-breadcrumb-item>
        <a-breadcrumb-item>链接管理</a-breadcrumb-item>
    </a-breadcrumb>

    <div style="margin: 15px 0;">
        <div style="display: flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-start;">
            <!-- 视频类型选择 -->
            <a-form-item label="请选择类型" style="width: unset;">
                <a-select v-model="videoCate" @change="videoCateOnSelected" :style="{width:'120px'}" placeholder="选择分类">
                    <a-option :value="cate.id" v-for="cate in cateList">{{cate.name}}</a-option>
                </a-select>
            </a-form-item>

            <!-- 视频选择 -->
            <a-form-item label="请选择视频" style="width: unset;margin-left: 30px;">
                <a-select v-model="videoId" @change="videoNameOnSelected" :style="{width:'200px'}" placeholder="选择视频">
                    <a-option :value="video.id" v-for="video in videoList">{{video.name}}</a-option>
                </a-select>
            </a-form-item>
        </div>

        <!-- 数据表格 -->
        <div style="max-height: 620px;">
            <a-table column-resizable :columns="tableColumns" :hoverable="true" :stripe="true" :data="videoLinkList"
                :scroll="{y: '100%'}">
                <template #operate="{ record }">
                    <a-button size="small" status="success" @click="showEditForm(record)" style="margin-left: 5px;">编辑
                    </a-button>
                    <a-popconfirm content="确定删除吗?" type="warning" @ok="deleteLink(record.id)">
                        <a-button size="small" status="danger" style="margin-left: 5px;">删除</a-button>
                    </a-popconfirm>
                </template>
            </a-table>
        </div>

        <!-- 添加按钮 -->
        <div style="margin: 10px 0;">
            <a-button type="primary" @click="showAddForm">
                <template #icon>
                    <icon-plus />
                </template>
                <template #default>添加</template>
            </a-button>
        </div>
    </div>

    <!-- 弹出添加/编辑表单 -->
    <a-modal :title="addFormTitle" v-model:visible="addFormIsShow" @cancel="addFormCancel" @ok="addFormOk">
        <a-form :model="addVideoLinkFormData">
            <a-form-item field="name" label="名称">
                <a-input v-model="addVideoLinkFormData.name" />
            </a-form-item>
            <a-form-item field="url" label="url">
                <a-input v-model="addVideoLinkFormData.url" />
            </a-form-item>
            <a-form-item field="real_url" label="播放地址">
                <a-input v-model="addVideoLinkFormData.real_url" />
            </a-form-item>
        </a-form>
    </a-modal>
</template>


<script>
    import { ref, } from 'vue';
    import { IconPlus, } from '@arco-design/web-vue/es/icon';
    import { Message } from '@arco-design/web-vue';
    import { getAllTeleplay, getTeleplayLinks } from '../../api/teleplay';
    import { getAllMovie, getMovieLinks } from '../../api/movie';
    import { getAllAnimation, getAnimationLinks } from '../../api/animation';
    import { addTeleplayLink, editTeleplayLink, deleteTeleplayLink } from '../../api/tlink';
    import { addMovieLink, editMovieLink, deleteMovieLink } from '../../api/mlink';
    import { addAnimationLink, editAnimationLink, deleteAnimationLink } from '../../api/alink';


    export default {
        components: {
            IconPlus,
        },
        setup() {
            // 表格列定义
            const tableColumns = ref([
                {
                    title: 'Id',
                    dataIndex: 'id',
                    width: 80,
                    ellipsis: true,
                    tooltip: true,
                },
                {
                    title: '名称',
                    dataIndex: 'name',
                },
                {
                    title: '地址',
                    dataIndex: 'url',
                    // width: 250,
                    ellipsis: true,
                    tooltip: true,
                },
                {
                    title: '播放地址',
                    dataIndex: 'real_url',
                    // width: 250,
                    ellipsis: true,
                    tooltip: true,
                },
                {
                    title: '操作',
                    slotName: 'operate',
                    fixed: 'right',
                    width: 230,
                }
            ]);

            // 视频分类
            const cateList = ref([
                { id: '电视剧', name: '电视剧' },
                { id: '电影', name: '电影' },
                { id: '动漫', name: '动漫' },
            ]);

            // 选中的视频分类
            let videoCate = ref('');

            // 视频列表数据
            const videoList = ref([]);

            // 视频列表数据
            const videoLinkList = ref([]);

            // 选中视频id
            const videoId = ref('');

            // 分类选择框选择事件
            const videoCateOnSelected = (value) => {
                videoList.value = [];
                switch (value) {
                    case '电视剧':
                        getTeleplays();
                        break;
                    case '电影':
                        getMovies();
                        break;
                    case '动漫':
                        getAnimations();
                        break;

                    default:
                        break;
                }
                videoId.value = '';
            };

            // 获取电视剧数据
            const getTeleplays = () => {
                getAllTeleplay(true).then(res => {
                    if (res.code != 200) {
                        Message.error('数据加载失败');
                        return;
                    }
                    videoList.value = res.data;
                }).catch(err => console.log(err));
            };

            // 获取电影数据
            const getMovies = () => {
                getAllMovie(true).then(res => {
                    if (res.code != 200) {
                        Message.error('数据加载失败');
                        return;
                    }
                    videoList.value = res.data;
                }).catch(err => console.log(err));
            };

            // 获取动漫数据
            const getAnimations = () => {
                getAllAnimation(true).then(res => {
                    if (res.code != 200) {
                        Message.error('数据加载失败');
                        return;
                    }
                    videoList.value = res.data;
                }).catch(err => console.log(err));
            };

            // 视频被选中
            const videoNameOnSelected = (id) => {
                videoLinkList.value = [];
                // 获取视频的播放链接
                switch (videoCate.value) {
                    case '电视剧':
                        getTeleplayLinks(id, true).then(res => {
                            if (res.code != 200) {
                                Message.error(`获取数据失败：${res.msg}`);
                                return;
                            }
                            videoLinkList.value = res.data;
                        });
                        break;
                    case '电影':
                        getMovieLinks(id, true).then(res => {
                            if (res.code != 200) {
                                Message.error(`获取数据失败：${res.msg}`);
                                return;
                            }
                            videoLinkList.value = res.data;
                        });
                        break;
                    case '动漫':
                        getAnimationLinks(id, true).then(res => {
                            if (res.code != 200) {
                                Message.error(`获取数据失败：${res.msg}`);
                                return;
                            }
                            videoLinkList.value = res.data;
                        });
                        break;

                    default:
                        break;
                }
            };


            // 视频id
            const vlinkId = ref(0);

            // 是否显示添加/编辑表单
            const addFormIsShow = ref(false);

            // 表单标题
            const addFormTitle = ref('添加链接');

            // 表单数据存储
            const addVideoLinkFormData = ref({
                name: '',
                url: '',
                real_url: '',
            });

            // 显示添加链接表单
            const showAddForm = () => {
                if (videoCate.value && videoId.value) {
                    addFormTitle.value = '添加链接';
                    addFormIsShow.value = true;
                }
            };

            // 提交添加/编辑视频
            const addFormOk = () => {
                switch (videoCate.value) {
                    case '电视剧':
                        if (isEdit.value) {    // 编辑视频链接
                            editTeleplayLink(vlinkId.value, addVideoLinkFormData.value).then(res => {
                                if (res.code != 200) {
                                    Message.error('操作失败');
                                    return;
                                }
                                Message.success('操作成功');
                                isEdit.value = false;
                                vlinkId.value = 0;
                                // 重新加载数据
                                reloadTeleplayLinks();
                            }).catch(err => console.log(err));

                        } else {    // 添加视频链接
                            addVideoLinkFormData.value['teleplay_id'] = videoId.value;
                            addTeleplayLink(addVideoLinkFormData.value).then(res => {
                                if (res.code != 200) {
                                    Message.error('操作失败');
                                    return;
                                }
                                Message.success('操作成功');
                                // 重新加载数据
                                reloadTeleplayLinks();
                            }).catch(err => console.log(err));
                        }
                        break;

                    case '电影':
                        if (isEdit.value) {    // 编辑视频链接
                            editMovieLink(vlinkId.value, addVideoLinkFormData.value).then(res => {
                                if (res.code != 200) {
                                    Message.error('操作失败');
                                    return;
                                }
                                Message.success('操作成功');
                                isEdit.value = false;
                                vlinkId.value = 0;
                                // 重新加载数据
                                reloadMovieLinks();
                            }).catch(err => console.log(err));
                        } else {    // 添加视频链接
                            addVideoLinkFormData.value['movie_id'] = videoId.value;
                            addMovieLink(addVideoLinkFormData.value).then(res => {
                                if (res.code != 200) {
                                    Message.error('操作失败');
                                    return;
                                }
                                // 重新加载数据
                                reloadMovieLinks();
                                Message.success('操作成功');
                            }).catch(err => console.log(err));
                        }
                        break;

                    case '动漫':
                        if (isEdit.value) {    // 编辑视频链接
                            editAnimationLink(vlinkId.value, addVideoLinkFormData.value).then(res => {
                                if (res.code != 200) {
                                    Message.error('操作失败');
                                    return;
                                }
                                Message.success('操作成功');
                                isEdit.value = false;
                                vlinkId.value = 0;
                                // 重新加载数据
                                reloadAnimationLinks();
                            }).catch(err => console.log(err));
                        } else {    // 添加视频链接
                            addVideoLinkFormData.value['animation_id'] = videoId.value;
                            addAnimationLink(addVideoLinkFormData.value).then(res => {
                                if (res.code != 200) {
                                    Message.error('操作失败');
                                    return;
                                }
                                // 重新加载数据
                                reloadAnimationLinks();
                                Message.success('操作成功');
                            }).catch(err => console.log(err));
                        }
                        break;

                    default:
                        break;
                }
            };

            // 重新加载电视剧链接数据
            const reloadTeleplayLinks = () => {
                getTeleplayLinks(videoId.value, true).then(res => {
                    if (res.code != 200) {
                        Message.error(`获取数据失败：${res.msg}`);
                        return;
                    }
                    videoLinkList.value = res.data;
                });
            }

            // 重新加载电影链接数据
            const reloadMovieLinks = () => {
                getMovieLinks(videoId.value, true).then(res => {
                    if (res.code != 200) {
                        Message.error(`获取数据失败：${res.msg}`);
                        return;
                    }
                    videoLinkList.value = res.data;
                });
            }

            // 重新加载动漫链接数据
            const reloadAnimationLinks = () => {
                getAnimationLinks(videoId.value, true).then(res => {
                    if (res.code != 200) {
                        Message.error(`获取数据失败：${res.msg}`);
                        return;
                    }
                    videoLinkList.value = res.data;
                });
            }


            // 取消添加链接
            const addFormCancel = () => {
                isEdit.value = false;
                vlinkId.value = 0;
                addVideoLinkFormData.value = {};
                addFormIsShow.value = false;
            };

            // 是否为编辑
            let isEdit = ref(false);

            // 显示编辑表单
            const showEditForm = (record) => {
                addFormTitle.value = '编辑视频';
                isEdit.value = true;
                vlinkId.value = Number(record.id);
                addVideoLinkFormData.value = record;
                addFormIsShow.value = true;
            };

            // 删除链接
            const deleteLink = (id) => {
                switch (videoCate.value) {
                    case '电视剧':
                        deleteTeleplayLink(id).then(res => {
                            if (res.code != 200) {
                                Message.error('操作失败');
                                return;
                            }
                            // 重新加载数据
                            reloadTeleplayLinks();
                            Message.success('操作成功');
                        }).catch(err => console.log(err));
                        break;

                    case '电影':
                        deleteMovieLink(id).then(res => {
                            if (res.code != 200) {
                                Message.error('操作失败');
                                return;
                            }
                            // 重新加载数据
                            reloadMovieLinks();
                            Message.success('操作成功');
                        }).catch(err => console.log(err));
                        break;

                    case '动漫':
                        deleteAnimationLink(id).then(res => {
                            if (res.code != 200) {
                                Message.error('操作失败');
                                return;
                            }
                            // 重新加载数据
                            reloadAnimationLinks();
                            Message.success('操作成功');
                        }).catch(err => console.log(err));
                        break;

                    default:
                        break;
                }
            };


            return {
                tableColumns,
                cateList,
                videoCate,
                videoList,
                videoLinkList,
                videoId,
                addFormIsShow,
                addFormTitle,
                addVideoLinkFormData,

                videoCateOnSelected,
                videoNameOnSelected,
                showAddForm,
                addFormOk,
                addFormCancel,
                showEditForm,
                deleteLink
            }

        }
    }

</script>